import classNames from "classnames"
import './billList.scss'
import { useMemo, useState } from "react"
import { billTypeToName } from "@/contants"
import Icon from "@/components/Icon"

const DailyBill = ({ day, list }) => {
  // 计算 支出 收入 结余
  const dayMoney = useMemo(() => {
    // 支出 收入 结余
    const pay = list.filter(el => el.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = list.filter(el => el.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      totle: pay + income
    }
  }, [list])
  const [listShow, setListShow] = useState(false)
  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{day}</span>
          <span className={classNames('arrow', listShow && 'expand')} onClick={() => setListShow(!listShow)}></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayMoney.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayMoney.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayMoney.totle.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      <div className="billList" style={{ display: listShow ? 'block' : 'none' }}>
        {list.map(item => {
          return (
            <div key={item.id} className="bill">
              <Icon type={item.useFor} />
              <div className="detail">
                <div className="billType">
                  {billTypeToName[item.useFor]}
                </div>
              </div>
              <div className={classNames('money', item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default DailyBill